import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class WaimaiItem extends StatefulWidget {
  const WaimaiItem({super.key});

  @override
  _WaimaiItemState createState() => _WaimaiItemState();
}

class _WaimaiItemState extends State<WaimaiItem> {
  List _foods = [];
  int activeIndex = 0;
  @override
  void initState() {
    super.initState();
    _getData();
  }

  _getData() async {
    // 1.创建dio实例
    Dio dio = Dio();
    // 2.发送请求
    var res =
        await dio.get('https://zhousg.atomgit.net/harmonyos5/takeaway.json');
    // 3.处理响应数据
    setState(() {
      _foods = res.data as List;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          //中间主体部分
          _center(),
          //底部
          _bottom()
        ],
      ),
    );
  }

//中间主体部分
  _center() {
    if (_foods.isEmpty) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    return Container(
      width: double.infinity,
      height: double.infinity,
      decoration: const BoxDecoration(
        color: Colors.white,
      ),
      child: Row(
        children: [
          //左 - 分类
          Container(
              width: 80,
              height: double.infinity,
              decoration: const BoxDecoration(color: Colors.black12),
              child: Column(
                children: _centerLeft(),
              )),
          //右 - 美食介绍
          Expanded(
              flex: 1,
              child: Container(
                  height: double.infinity,
                  color: Colors.white,
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: ListView.separated(
                      itemBuilder: (context, index) {
                        List foodList = _foods[activeIndex]['foods'];
                        return _foodItem(foodList[index]);
                      },
                      separatorBuilder: (context, index) {
                        return Container(
                          height: 10,
                          color: Colors.white,
                          width: double.infinity,
                        );
                      },
                      itemCount: _foods[activeIndex]['foods'].length)))
        ],
      ),
    );
  }

//底部
  _bottom() {
    return Positioned(
        child: Container(
      width: 240,
      height: 50,
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
      decoration: const BoxDecoration(
          color: Colors.black87,
          borderRadius: BorderRadius.all(Radius.circular(25))),
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          //价格
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '￥0.00',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
              ),
              Text(
                '预估另需配送费￥0.00元',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 10,
                    fontWeight: FontWeight.normal),
              ),
            ],
          ),
          //去下单
          Text(
            '去下单',
            style: TextStyle(
                color: Colors.red, fontSize: 12, fontWeight: FontWeight.bold),
          )
        ],
      ),
    ));
  }

  //左侧分类
  _centerLeft() {
    return _foods.map((item) {
      return GestureDetector(
        onTap: () {
          setState(() {
            activeIndex = _foods.indexOf(item);
          });
        },
        child: Container(
          width: 80,
          height: 60,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: activeIndex == _foods.indexOf(item)
                ? Colors.white
                : Colors.transparent,
          ),
          child: Text(item['name']),
        ),
      );
    }).toList();
  }

  _foodItem(food) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Row(
        children: [
          Image.network(
            food['picture'],
            width: 60,
            height: 60,
            fit: BoxFit.cover,
          ),
          Expanded(
              child: Container(
            padding: const EdgeInsets.only(left: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  food['name'],
                  style: const TextStyle(
                      fontSize: 16, fontWeight: FontWeight.bold),
                ),
                Text(
                  food['description'] ?? '',
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(fontSize: 12, color: Colors.black54),
                ),
                Text(
                  '￥${food['price']}',
                  style: const TextStyle(fontSize: 12, color: Colors.red),
                )
              ],
            ),
          ))
        ],
      ),
    );
  }
}
